<ui:composition
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:fn="http://java.sun.com/jsp/jstl/functions">

    <script type="text/javascript" language="javascript" src="#{request.contextPath}/resources/js/jquery.countdown.js" />
    <script type="text/javascript" language="javascript" src="#{request.contextPath}/resources/js/jquery.countdown-es.js" />

    <script type="text/javascript">

        function serverTime() {
            var horaServer = new Date(${poolAplicacionBean.stringFechaServer});
            return horaServer;
        }

    </script>

    <p:panel style="margin-top: 3px; width: 100%;"
             rendered="#{fn:length(poolAplicacionBean.pooles)>0}" >

        <p:carousel value="#{poolAplicacionBean.pooles}" var="p" style="width: 100%; border: none;"
                autoPlayInterval="10000"
                numVisible="1"
                vertical="true"
                circular="true">

            <h:panelGrid columns="1" style="width: 100%;" >

                <h:panelGroup layout="block" styleClass="poolInfo" >

                    <h:panelGroup layout="block" styleClass="poolDescripcion">

                        <h:outputText value="Pool Nro: "/>
                        <h:outputText value="#{p.nroPool}" >
                            <f:convertNumber pattern="000" />
                        </h:outputText>
                        <br/>

                        <p:commandLink action="#{poolSessionBean.seleccionarPool(p)}" process="@this" ajax="false" immediate="true" >
                           <h:outputText value="#{p.descripcion}" style="font-weight: bold;" />
                           <!--<p:graphicImage value="../resources/imagenes/masinfo.jpg" width="120" height="22" />-->
                        </p:commandLink>

                    </h:panelGroup>                    

                   <h:panelGroup layout="block" styleClass="poolCantidades">

                        <p:idleMonitor timeout="9000" >
                            <p:ajax event="idle" update="cantDisponible, porcentajeVenta" />
                        </p:idleMonitor>

                       <p:commandLink id="cantDisponible" action="#{poolSessionBean.seleccionarPool(p)}"
                                      process="@this"
                                      ajax="false" immediate="true"  >

                       <h:outputText  value="#{p.cantidadDisponible}"
                                     style="margin: 10px;">
                           <f:convertNumber pattern="0"/>
                       </h:outputText>

                       <h:outputText value="Unidades disponibles" />

                       <p:effect type="pulsate" event="load" delay="1">
                            <f:param name="mode" value="'show'" />
                       </p:effect>

                       </p:commandLink>


                       <h:panelGroup layout="block" styleClass="poolBarraPorcentaje" style="">

                            <p:progressBar id="porcentajeVenta"
                                  value="#{p.porcentaje}" labelTemplate="{value}% Vendido"
                                  displayOnly="true" style="height: 15px; width: 220px; font-size: 10px;"   >

                               <p:effect type="shake" event="load" delay="1">
                                    <f:param name="mode" value="'show'" />
                               </p:effect>

                           </p:progressBar>
                        </h:panelGroup>
                    </h:panelGroup>

                    

                    <div class="poolContador">

                        <script type="text/javascript">
                            $(function () {
                                var fechaFin = new Date(#{poolSessionBean.fechaFin(p)} );
                                $('#defaultCountdown#{p.nroPool}').countdown({until: fechaFin, serverSync: serverTime()});
                            });
                        </script>

                        <div class="poolFinaliza" > Tiempo disponible </div>
                        <div id="defaultCountdown#{p.nroPool}" ></div>
                        
                    </div>

                    <h:panelGroup layout="block" styleClass="poolBoton" rendered="#{p.activa}" >

                        <p:commandLink action="#{poolSessionBean.seleccionarPool(p)}"
                                       process="@this"                                       
                                       ajax="false" >
                            <div>
                              <p:graphicImage value="../resources/imagenes/info32.png" width="32" height="32" />
                            </div>
                            <div>
                              <h:outputText value="+ Info" rendered="#{p.activa}"/>
                            </div>

                        </p:commandLink>
                        
                    </h:panelGroup>

                    <h:panelGroup layout="block" styleClass="poolBoton" rendered="#{p.activa}">

                        <p:commandLink action="#{poolSessionBean.seleccionarPool(p)}"
                                       process="@this"                                       
                                       ajax="false" >

                            <div>
                              <p:graphicImage value="../resources/imagenes/boton-carrito.png" width="43" height="32" />
                            </div>
                            <div>
                              <h:outputText value="Reservar" rendered="#{p.activa}"/>
                            </div>
                           
                        </p:commandLink>

                    </h:panelGroup>

                    <h:panelGroup layout="block" styleClass="poolAgotado" rendered="#{not p.activa}"
                                  style="z-index: 999;">


                        <p:graphicImage value="../../TiendaVirtual/imagenes/pool/agotado.jpg"
                                        height="50" style="z-index: 999;" />

                    </h:panelGroup>

                   


                </h:panelGroup>

            </h:panelGrid>

        </p:carousel>


        </p:panel>

</ui:composition>
